<template>
  <div class="app">

    <div class="artBox marbo50">
      <titleBox :styleData="title1styleData">
        <template #title>{{header.title}}</template>
        <template #box2>
          <ul class="customText">
            <li
              v-for="listData in header.list"
              :key="listData.id"
              @mouseenter="getArtlist(listData.id)"
              :class="{isactve:listData.id == flg}"
            >{{listData.title}}</li>

            <li>
              <router-link :to="'/listgoods/'+header.id+'/no/no/'">更多</router-link>
            </li>
          </ul>
        </template>
      </titleBox>
      <div class="box flex">
        <div class="boxItem" v-for="item in Artlist" :key="item.id">
          <img :src="item.imgurl" alt />
          <p>{{item.title}}</p>
          <span class="jg">￥80.00</span>
        </div>
      </div>
      <img style="width:100%;" :src="header.ADimg" alt />
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import titleBox from "@/components/titleBox/titleBox";

export default {
  data() {
    return {
      title1styleData: {
        height: "30px",
        width: "100px"
      },
      flg: null,
      Artlist: null
    };
  },
  computed: {
    vuexData: function() {
      return this.$store.state.commonDATA.MainProductsVuex;
    }
  },
  props: ["header", "list"],
  created: function() {
    var headerID = this.header.list[0].id;
    this.flg = headerID;
    var list;
    for (var key in this.vuexData) {
      if (headerID == this.vuexData[key].id) {
        list = this.vuexData[key].list;
        // return true;
        break;
      }
    }

    this.Artlist = list;
  },
  methods: {
    getArtlist(index) {
      var headerID = index;
      this.flg = headerID;
      var list;
      for (var key in this.vuexData) {
        if (headerID == this.vuexData[key].id) {
          list = this.vuexData[key].list;
          break;
        }
      }
      this.Artlist = list;
    }
  },
  components: { titleBox }
};
</script>

<style lang="scss" type="text/css" scoped>
@import "@/common/style.scss";
.artBox {
  .isactve {
    border-bottom: 4px red solid;
    height: 30px;
  }
  // background-color: beige;
  .btDOM {
  }
  .customText {
    font-size: 15px;
  }
  .box {
    margin-top: 15px;
    margin-bottom: 15px;
    .boxItem {
      width: 200px;
      img {
        width: 180px;
        height: 180px;
      }
      p {
        width: 180px;
        height: 35px;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .jg {
        color: red;
      }
      text-align: left;
      span:nth-child(1) {
      }
    }
  }
}

.customText {
  // width: 320px;
  li {
    float: left;
    margin-left: 10px;
    cursor: pointer;
  }
}
</style>
